<template>
  <div class="center">
    <div id="center" :style="{width: '100%', height: '400px'}"></div>
  </div>
</template>

<script>
export default {
  name: "DataState",
  methods: {
    myEacherts() {
      let myChart = this.$echarts.init(document.getElementById("center"));
      myChart.setOption({
        tooltip: {
          formatter: "{a} <br/>{b} : {c}%"
        },
        toolbox: {
          feature: {
            restore: {},
            saveAsImage: {}
          }
        },
        series: [
          {
            name: "业务指标",
            type: "gauge",
            detail: { formatter: "{value}%" },
            data: [{ value: 100, name: "完成率" }]
          }
        ]
      });

  
    }
  },
  mounted() {
    this.myEacherts();
  }
};
</script>

<style lang="scss" scoped>
.center {
  width: 400px;
  height: 400px;
  border: 1px solid blue;
  border-radius: 50%;
  box-shadow: 1px 1px 1px 1px rgba(255, 255, 255, 0.2);
  background: rgba(0, 0, 255, 0.05);
  //   text-align:center;
  margin-left: 200px;
  margin-top:50px;
}
</style>
